<template>
	<view class="detail">
		<view class="await">
			等待支付....
		</view>

		<view class="site">
			<navigator url="../../site/site?type=select">
				<view class="bakground-color">
					<view class="gname">
						姓名: {{ address.name }}

						<p>手机号: {{ address.tel }}</p>
					</view>
					<view class="detail">
						快递地址: {{ address.addressText }}
					</view>

				</view>
			</navigator>
		</view>
		<view class="detail-item">


			<view class="background">
				<view class="serial">
					<view class="serial-box">
						订单编号
					</view>
					<view class="serial-item">
						等待支付
					</view>

				</view>
				<view class="order" v-for="item in count.orderDetailList" :key="item.skuId">
					<image class="img" style="width: 150rpx; height: 150rpx;" :src="item.coverImg" mode=""></image>

					<view class="specification">
						<view class="name">
							{{item.gname}}

							<text class="prices" style="position: absolute;right: 0;">￥{{item.price}}</text>
						</view>

						<view class="sku">
							编号: {{ item.skuCode }}
							<text class="price" style="margin-left: 200rpx;">*{{item.count}}</text>
						</view>
						<view class="sku">
							规格: {{ item.color_text }}
						</view>
					</view>

				</view>

				<view class="total">
					合计:￥{{ count.price }}
				</view>

				<view class="payment">
					<text class="text" @click="goPayment">确认付款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		const LEJU_ORDER_KEY = 'leju_order';
	
	import orderApi from "@/api/order/index.js"
	export default {
		data() {
			return {
				address: []
			}
		},
		

		onShow() {
			// 城市
			const addressObj = uni.getStorageSync('selectAddress');
			console.log("addressObj", addressObj)
			this.address = {
				id: addressObj.id,
				name: addressObj.name,
				tel: addressObj.tel,
				addressText: addressObj.address.region.label + addressObj.address.region.detailed
			}

		},
		computed: {
			count() {
				// vuex请求数据
				return this.$store.state.order.tempOrder
				
			},
		
		},
		methods: {
			// 支付
			goPayment() {
				uni.showLoading({
					title: '提交订单'
				});
				
				
				var skuList = {};
				// console.log("===>",skuList)
				for(var i = 0 ; i < this.count.orderDetailList.length; i ++){
					var sku = this.count.orderDetailList[i];
						skuList['orderDetail['+i+'].skuId'] = sku.skuId;
						skuList['orderDetail['+i+'].price'] = sku.price;
						skuList['orderDetail['+i+'].count'] = sku.count;
				}
				
				
				
				var postData = {
					userId: this.count.userId,
					addressId: this.address.id,
					count: this.count.count,
					
					price: this.count.price,
					...skuList
				}
				orderApi.addOrderBatch(postData).then(res => {
					
				if(res.code =="S"){
					uni.hideToast();
					var orderId = res.orderId
					uni.navigateTo({
					    url: '../payment/payment?price=' + this.count.price+'&orderId='+orderId
					});
				}else{
					uni.hideToast();
					uni.showLoading({
					    title: '提交失败'
					});
				}

				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.detail {
		.await {
			padding-top: 30rpx;
			margin-left: 40rpx;
			font-family: PingFangSC-Regular;
			font-size: 35rpx;
			color: #22B14C;
			letter-spacing: 1.71rpx;
		}

		.site {
			display: flex;
			justify-content: center;

			.bakground-color {
				height: 404rpx;
				margin-top: 40rpx;
				width: 672rpx;
				height: 200rpx;
				background: #354E44;
				box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
				border-radius: 24rpx;
				border-radius: 24rpx;

				.gname {
					padding-top: 20rpx;
					padding-left: 30rpx;
					line-height: 40rpx;
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #fff;
					letter-spacing: 1.71rpx;
				}

				.detail {
					padding-left: 30rpx;
					line-height: 40rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #fff;
					letter-spacing: 1.71rpx;
				}
			}
		}

		.detail-item {


			display: flex;
			justify-content: center;

			.background {
				width: 672rpx;
				height: 404rpx;
				margin-top: 40rpx;
				background: #FFFFFF;
				box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
				border-radius: 24rpx;
				border-radius: 24rpx;

				.serial {
					display: flex;
					justify-content: space-around;
					margin-top: 22rpx;

					.serial-box {
						// margin-left: -66rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #3E3E3E;
						letter-spacing: 1.71rpx;
					}

					.serial-item {
						// margin-right: -36rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #409EFF;
						letter-spacing: 1.71rpx;
					}
				}

				.order {

					.img {
						margin-top: 36rpx;
						margin-left: 36rpx;
						position: absolute;
					}

					.specification {
						position: absolute;
						margin-top: 50rpx;
						margin-left: 220rpx;

						.name {
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #3E3E3E;
							letter-spacing: 1.86rpx;
						}

						.sku {
							margin-top: 10rpx;
							font-family: PingFangSC-Regular;
							font-size: 22rpx;
							color: #8D8D8D;
							letter-spacing: 1.57rpx;
						}

					}

				}

				.total {
					margin-left: 482rpx;
					margin-top: 210rpx;
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
				}

				.payment {
					width: 124rpx;
					height: 50rpx;
					opacity: 0.76;
					border: 2rpx solid #2D4F43;
					border-radius: 10rpx;
					border-radius: 10rpx;
					margin-top: 20rpx;
					margin-left: 482rpx;

					.text {
						line-height: 50rpx;
						display: flex;
						margin-left: 7rpx;

						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
				}
			}
		}

	}
</style>
